<!--省客户列表-->
<template>
  <div class="ne-procumtomer">
    <dic-table
        height="100%"
        ref="proCusTable"
        stripe
        highlight-current-row
        highlight-hover-row
        border
        header-row-class-name="header-row-class"
        row-class-name="ne-row-class"
        :columnData="proCustbs.tableColumns"
        :tableData="tableData"
        :loading="proCustbs.tableLoading"
        :currentPage="currentPage"
        :pageSize="pageSize"
        :totalResult="totalResult"
        :pager="true"
        @cell-click="cellClickEvent"
        @on-page-change="handlePageChange"
    >
      <template #opt="{ row }">
        <div class="ne-info-btns">
          <el-popover
              class="ne-team-pop"
              placement="bottom"
              trigger="hover">
            <dic-table
                style="width:4.50rem;min-width: 400px;"
                height="100%"
                ref="cusTeamTable"
                highlight-hover-row
                border
                :columnData="cusTeamtbs.tableColumns"
                :tableData="cusTeamtbs.tableData"
                :loading="cusTeamtbs.tableLoading"
                :pager="false"
            >
            </dic-table>
            <el-button slot="reference" style="margin-right: .1rem;" @click.stop="showCustManTeams(row)" type="text" size="small">客户经理</el-button>
          </el-popover>
          <el-popover
              class="ne-team-pop"
              placement="bottom"
              trigger="hover">
            <dic-table
                style="width:3.50rem;min-width: 300px;"
                height="100%"
                ref="contactsTable"
                highlight-hover-row
                border
                :columnData="contactstbs.tableColumns"
                :tableData="contactstbs.tableData"
                :loading="contactstbs.tableLoading"
                :pager="false"
            >
            </dic-table>
            <el-button slot="reference" @click.stop="showContacts(row)" type="text" size="small">联系人</el-button>
          </el-popover>
        </div>
      </template>
    </dic-table>
  </div>
</template>

<script>
import DicTable from "@/components/public/DicTable";
// import OrderService from "@/api/order/OrderService.js";
export default {
  name: "ProvCustomer",
  data(){
    return{
      // 省客户列表
      proCustbs:{
        tableColumns: [
          { field: "orgUscc", title: "统一社会信用代码",width: 230},
          { field: "custName", title: "客户名称",width: 360},
          { field: "commonRegionName", title: "归属区域",width: 168},
          { field: "custId", title: "省客户ID",width: 220},
          { field: "custNumber", title: "省客户编码",width: 220},
          { field: "registerAddr", title: "客户地址",width: 360},
          { slotName: "opt", title: "详情", width:'160' ,fixed: 'right'},
        ],
        tableData:[],
        tableLoading: false,
        tablePage: {
          currentPage: 1,
          pageSize: 10,
          totalResult: 0,
        },
      },
      // 客户经理列表
      cusTeamtbs:{
        tableColumns: [
          { field: "staffId", title: "账号"},
          { field: "staffName", title: "名称"},
          { field: "staffCode", title: "人力账号"},
          { field: "mobilePhone", title: "电话"},
        ],
        tableData:[],
        tableLoading: false
      },
      // 联系人列表
      contactstbs:{
        tableColumns: [
          { field: "contactName", title: "名称"},
          { field: "mobilePhone", title: "电话"},
          { field: "eMail", title: "邮箱"}
        ],
        tableData:[],
        tableLoading: false
      }
    }
  },
  props:{
    provData:{
      type:Object
    },
    allParams:{
      type: Object
    }
  },
  mounted() {
  },
  created() {
  },
  components:{
    DicTable
  },
  computed:{
    tableData:{
      get(){
        this.proCustbs.tableLoading = false;
        return this.provData.resultObject.customers
      },
      set(){
        return this.proCustbs.tableData
      },
    },
    currentPage:{
      get(){
        return  ~~this.provData.pageInfo.pageIndex;
      },
      set(){
        return this.proCustbs.tablePage.currentPage
      },
    },
    pageSize:{
      get(){
        if(~~this.provData.pageInfo.pageSize){
          return ~~this.provData.pageInfo.pageSize;
        }else{
          return this.proCustbs.tablePage.pageSize
        }
      },
      set(){
        return this.proCustbs.tablePage.pageSize
      },
    },
    totalResult:{
      get(){
        return ~~this.provData.total;
      },
      set(){
        return this.proCustbs.tablePage.totalResult
      },
    }
  },
  methods:{
    cellClickEvent () {
      
      
      let contacts = arguments[0].row.contacts;
      // delete contacts['_XID'];
      if(contacts.length<=0){
        
        this.$emit('getProvMsg', {'showitem':2,'contacts':contacts,'returnJson':arguments[0].row});
      }else{
        contacts.forEach((item,index)=>{
          for(var key in contacts){
            if(!(contacts[key].trim())){
              
              this.$emit('getProvMsg', {'showitem':2,'contacts':contacts,'returnJson':arguments[0].row});
              return
            }
          }
        })
      };
    },
    handlePageChange({ currentPage, pageSize }) {
      
      
      this.proCustbs.tableLoading = true;
        this.proCustbs.tablePage.currentPage = currentPage;
        this.proCustbs.tablePage.pageSize = pageSize;
        this.$emit('provPageChange',{
          pageIndex: currentPage,
          pageSize: pageSize
        });
      },
      showCustManTeams(row){
        
        let cusManTeam = row.custManagerTeams;
        
        this.cusTeamtbs.tableData = row.custManagerTeams;
      },
      showContacts(row){
        
        
        let contacts = row.contacts;
        
        this.contactstbs.tableData = row.contacts;
      }
  },
}
</script>

<style lang="scss" scoped>
.ne-procumtomer{
  .ne-info-btns{
    ::v-deep .el-button{
      padding: 0;
    }
  }
  .ne-team-pop{
    width: 4rem;
  }
  ::v-deep .vxe-table--render-default .vxe-body--column:not(.col--ellipsis),::v-deep .vxe-table--render-default .vxe-footer--column:not(.col--ellipsis) {
    cursor: pointer;
  }
}
</style>

